<template>
  <div>
      <div v-for="item in list" :key="item.title" class="item">
          <h3>{{item.title}}</h3>
          <h4>{{item.subTitle}}</h4>
          <p>{{item.content}}</p>
      </div>
      <p class="more" @click="showMore">查看更多……</p>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
const list =ref(
    [
        {
            title:'第一篇',
            subTitle:'小作文',
            content:'内容是空是发送到发'
        },
        {
            title:'第二篇',
            subTitle:'小作文司法所发生',
            content:'内容是空发送到发顺丰虽然各个人'
        },
        {
            title:'第三篇',
            subTitle:'小作文',
            content:'内容是空刚恢复恢复规划发个话费分手的冯绍峰说'
        }
    ]
)
function showMore(){
    let temp = list.value
    temp.push({
            title:'第四篇',
            subTitle:'小作文',
            content:'内容是空刚恢复恢复规划发个话费分手的冯绍峰说'
        })
    list.value = temp
}
</script>

<style lang="scss" scoped>
.item{
    margin: 10px;
    border-radius: 4px;
    box-shadow: 0 0 4px 2px #eee;
    padding: 14px;
    h3{
        font-size: 18px;
        line-height: 40px;
        text-align: center;
    }
    h4{
        font-size: 14px;
        line-height: 30px;
        text-align: center;
    }
    p{
        font-size: 12px;
        line-height: 20px;
    }
}
.more{
    text-align: right;
    line-height: 50px;
    padding: 10px;
    cursor: pointer;
}
</style>